<template>
    <div class="myInput_class">
        <div v-if="label" class="lable_sty">{{ label }}</div>
        <el-input v-model="inputValue" :clearable="clearable" :placeholder="placeholder" @input="emitInput" />
    </div>
</template>

<script setup>
import { ref, watch, toRefs } from "vue";

let lable_width = ref('')
onMounted(() => {
    lable_width.value = props.lable_width;
});
const emit = defineEmits(["update:modelValue"]);
let props = defineProps({
    value: {
        type: String,
        default: "",
    },
    label: {
        type: String,
    },
    lable_width: {
        type: String,
        default: "100px",
    },
    placeholder: {
        type: String,
        default: "",
    },
    clearable: {
        type: Boolean,
        default: true,
    },
    modelValue: String,
});

// 监听文本框输入
const inputValue = ref(props.modelValue);
watch(
    () => props.modelValue,
    (newValue) => {
        console.log(newValue, 'dddddd')
        inputValue.value = newValue;
    }
);
const emitInput = () => {
    emit("update:modelValue", inputValue.value);
};
</script>

<style lang="less" scoped>
// .lable_top {
//     width: v-bind(lable_width);
//     text-align: right;
//     font-size: 16px;
// }

.lable_sty {
  font-weight: normal !important;
  font-size: 16px;
  color: #606266;
  display: flex;
  align-items: center;
  justify-content: start;
  min-width: 80px !important;
  width: v-bind(lable_width) !important;
  margin-right: 5px;
}


.myInput_class {
    display: flex;
    align-items: center;
    font-size: 16px;
}
</style>